<template>
	<view class="content">
		<heade title="添加客户" cross bg_color="bg_fff">
			<text class="m-l5" @tap="saveClick">保存</text>
		</heade>
		<view class="d-flex align-center justify-content-space-around" style="border-bottom: 2rpx solid #eee;">
			<view v-for="(item,i) in tabList" @tap="count= i" class="text-center p-t10" style="width: 33.333%;">
				<view class="p-b10" :class="count == i?'co_4DAABF':''">{{item}}</view>
				<view v-if="count == i" class="biankuang"></view>
			</view>
		</view>
		<view class="m-l10 m-r10 m-t5" v-if="count == 0">
			<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
				<view class="f-s14" style="width: 260rpx;">往来单位名称 <text class="co_c60001">*</text></view>
				<input type="text" v-model="Name" class="f-s14" placeholder="请输入往来单位名称">
			</view>
			<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
				<view class="f-s14" style="width: 260rpx;">往来单位编码</view>
				<input type="text" v-model="Code" class="f-s14" placeholder="请输入往来单位编码">
			</view>
			<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
				<view class="f-s14" style="width: 260rpx;">性质 <text class="co_c60001">*</text></view>
				<picker @change="naturePickerChange" class="flex1" :value="index" :range="nature" range-key="name">
					<view class="d-flex align-center justify-content-space-between flex1">
						<view class="f-s15">{{nature[index].name}}</view>
						<view class="iconfont icon-31xiala" style="transform: rotate(270deg);"></view>
					</view>
				</picker>
			</view>
			<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
				<view class="f-s14" style="width: 260rpx;">所属类别 <text class="co_c60001">*</text></view>
				<view class="d-flex align-center justify-content-space-between flex1" @tap="$common.url('/pages/parameters/client')">
					<view class="f-s14" :class="category.Name == ''?'co_grey':''">{{category.Name ==''?'请选择':category.Name}}</view>
					<view class="iconfont icon-31xiala" style="transform: rotate(270deg);"></view>
				</view>
			</view>
			<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
				<view class="f-s14" style="width: 260rpx;">客户价格等级</view>
				<picker @change="priceGradeChange" class="flex1" :value="priceIndex" :range="priceGrade" range-key="name">
					<view class="d-flex align-center justify-content-space-between flex1">
						<view class="f-s14">{{priceGrade[priceIndex].name}}</view>
						<view class="iconfont icon-31xiala" style="transform: rotate(270deg);"></view>
					</view>
				</picker>
			</view>
		</view>
		<view class="m-l10 m-r10 m-t5" v-if="count == 1">
			<view class="m-t20 p-b20" style="border-bottom: 2rpx solid #F0F0F0;">
				<view class="f-s15">默认收款方式</view>
				<view>
					<radio-group @change="radioChange">
						<label class="d-flex align-center m-t10" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio :value="item.value" :checked="index === current" style="transform:scale(0.7)" />
							</view>
							<view class="f-s14">{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view>
				<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
					<view class="f-s14 co_555555" style="width: 260rpx;">默认结算方式</view>
					<picker @change="clearingFormChange" class="flex1" :value="clearing" :range="clearingForm" range-key="Name">
						<view class="d-flex align-center justify-content-space-between flex1">
							<view class="f-s14" :class="clearing == -1?'co_grey':''">{{clearing == -1?'请选择':clearingForm[clearing].Name}}</view>
							<view class="iconfont icon-31xiala" style="transform: rotate(270deg);"></view>
						</view>
					</picker>
					
				</view>
				<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
					<view class="f-s14 co_555555" style="width: 260rpx;">默认账号</view>
					<picker @change="bankAccountQueryChange" class="flex1" :value="bankAccount" :range="BankAccountQuery" range-key="Name">
						<view class="d-flex align-center justify-content-space-between flex1">
							<view class="f-s14" :class="bankAccount == -1?'co_grey':''">{{bankAccount == -1?'请选择':BankAccountQuery[bankAccount].Name}}</view>
							<view class="iconfont icon-31xiala" style="transform: rotate(270deg);"></view>
						</view>
					</picker>
				</view>
				<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
					<view class="f-s14 co_555555" style="width: 260rpx;">默认票据类型</view>
					<picker @change="billListChange" class="flex1" :value="bill" :range="billList" range-key="name">
						<view class="d-flex align-center justify-content-space-between flex1">
							<view class="f-s14" :class="bill == -1?'co_grey':''">{{bill == -1?'请选择':billList[bill].name}}</view>
							<view class="iconfont icon-31xiala" style="transform: rotate(270deg);"></view>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class=" m-t5" v-if="count == 2">
			<view class="" v-for="(item,i) in linkman">
				<view class="m-l10 m-r10">
					<view class="" style="height: 200rpx;overflow: hidden;transition: .5s;" :style="{'height':item.isStatus?'420rpx':'250rpx'}">
						<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
							<view class="f-s14" style="width: 260rpx;">联系人</view>
							<input type="text" v-model="item.Contact" class="f-s14" placeholder="请输入联系人">
						</view>
						<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
							<view class="f-s14" style="width: 260rpx;">手机号</view>
							<input type="text" class="f-s14" v-model="item.MobilePhone" placeholder="请输入手机号">
						</view>
						<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
							<view class="f-s14" style="width: 260rpx;">联系电话</view>
							<input type="text" class="f-s14" v-model="item.TelephoneNo" placeholder="请输入联系电话">
						</view>
						<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
							<view class="f-s14" style="width: 260rpx;">到货地址</view>
							<input type="text" class="f-s14" v-model="item.ShipmentAddress" placeholder="请输入到货地址">
						</view>
						<view class="d-flex align-center p-t10 p-b10" style="border-bottom:2rpx solid #eee;">
							<view class="f-s14" style="width: 260rpx;">默认地址</view>
							<checkbox-group @change="checkboxChange($event,item)">
								<label>
									<checkbox value="1" :checked="item.Status == 1?true:false" style="transform: scale(0.8);" />
								</label>
							</checkbox-group>
						</view>
					</view>
					<view class="d-flex align-center justify-content-end f-s14 m-t8 m-b8">
						<view style="padding-right: 28rpx;border-right: 2rpx solid #B6B6B6;" @tap="deleteClick(i)">删除</view>
						<view class="m-l15 d-flex align-center" @tap="qiehuan(item)">
							<view>{{item.isStatus?'收起':'更多'}}</view>
							<view class="iconfont icon-sanjiaoxing f-s14 m-l3" style="transition: .5s;transform:rotate(0)" :style="{'transform':item.isStatus?'rotate(180deg)':'rotate(0)'}"></view>
						</view>
					</view>
				</view>
				<view style="height: 20rpx;background: #f0eff4;"></view>
			</view>
			
			<view class="b-liuhai" ><view style="height: 92rpx;"></view></view>
			<view style="position: fixed; bottom: 0;width: 100%;z-index: 9;" class="bg_fff" >
				<view class="b-liuhai">
					<view class="f-w500 co_fff f-s17 d-flex-center" style="width: 100%; height: 92rpx;background: #53b7ce;" @tap="addLinkman">
						<view class="yuanquan d-flex-center"><view class="iconfont icon-jiahao_o"></view></view>
						<view class="m-l10 f-s14">新增联系人</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count:0,
				current:4,
				tabList:['基本信息','结算方式','联系方式'],
				items:[
					{value:'01',name:'全额订金'},
					{value:'02',name:'全额现结'},
					{value:'00',name:'限期收款'},
					{value:'03',name:'月结'},
					{value:'05',name:'其它'},
				],
				linkman:[{
					isStatus:false,
					Contact:'',
					MobilePhone:'',
					TelephoneNo:'',
					ShipmentAddress:'',
					Status:0
				}],
				Name:'',
				Code:'',
				index:0,
				priceIndex:5,
				clearing:-1,
				bankAccount:-1,
				bill:-1,
				nature:[{id:'01',name:'客户'},{id:'00',name:'供应'},{id:'02',name:'客户/供应商'}],
				priceGrade:[
					{id:'00',name:'一级批发价'},
					{id:'01',name:'二级批发价'},
					{id:'02',name:'三级批发价'},
					{id:'03',name:'四级批发价'},
					{id:'04',name:'五级批发价'},
					{id:'05',name:'普通客户价'},
					{id:'06',name:'六级批发价'},
					{id:'07',name:'七级批发价'},
					{id:'08',name:'八级批发价'},
					{id:'09',name:'九级批发价'},
					{id:'10',name:'十级批发价'},
				],
				category:{Name:'',Code:''},
				SaleSettleStyle:{Code:'05'},
				clearingForm:[{Code:0}],
				BankAccountQuery:[{Name:''}],
				billList:[
					{id:'00',name:'普通发票'},
					{id:'01',name:'专用发票'},
					{id:'02',name:'收据'},
				]
			}
		},
		onLoad() {
			this.getData()
			this.getBankAccountQuery()
		},
		onShow() {
			var pages = getCurrentPages();
			var pages1 = pages[pages.length - 1]
			if(pages1.$vm.category) {
				this.category = pages1.$vm.category
			}
		},
		methods: {
			// 获取默认结算方式
			getData(){
				this.$http.post('valet_order/SettleStyleQuery').then(res => {
					if(res.code == 1) {
						this.clearingForm = res.data
					}
				})
			},
			// 获取账号查询
			getBankAccountQuery(){
				this.$http.post('valet_order/BankAccountQuery').then(res => {
					if(res.code == 1) {
						this.BankAccountQuery = res.data
					}
				})
			},
			radioChange(e) {
				this.SaleSettleStyle.Code = e.detail.value
			},
			qiehuan(item) {
				item.isStatus = !item.isStatus
			},
			checkboxChange(e,item) {
				if(e.detail.value == 1) {
					item.Status = 1
				}else {
					item.Status = 0
				}
			},
			// 默认结算方式
			clearingFormChange(e) {
				this.clearing = e.detail.value
			},
			// 默认账号
			bankAccountQueryChange(e) {
				this.bankAccount = e.detail.value
			},
			// 票据类型
			billListChange(e) {
				this.bill = e.detail.value
			},
			// 添加联系人
			addLinkman() {
				this.linkman.push({
					isStatus:false,
					Contact:'',
					MobilePhone:'',
					TelephoneNo:'',
					ShipmentAddress:'',
					Status:0
				})
			},
			// 删除联系人
			deleteClick(i) {
				this.linkman.splice(i,1)
			},
			// 性质
			naturePickerChange(e) {
				this.index = e.detail.value
			},
			// 客户价格等级
			priceGradeChange(e) {
				this.priceIndex = e.detail.value
			},
			saveClick() {
				if(this.Name == '') {
					return this.$common.show('请输入往来单位名称',true)
				}
				if(this.category.Code == '') {
					return this.$common.show('请选择所属类别',true)
				}
				if(this.linkman[0].Contact == '' || this.linkman[0].MobilePhone == '' || this.linkman[0].ShipmentAddress == '') {
					return this.$common.show('请填写完整的联系方式',true)
				}
				let resData = {
					"dto": {
						"Code": this.Code, //往来单位编码
						"Name": this.Name, //往来单位名称
						"PartnerType": {
							"Code": this.nature[this.index].id //所属类别，客户分类编码
						}, //性质，01 客户 00 供应商 02 客户/供应商
						"PartnerClass": {
							"Code": this.category.Code
						}, //类别
						"PriceGrade": {
							"Code": this.priceGrade[this.priceIndex].id
						}, //客户价格等级 默认05， 00：一级批发价 01：二级批发价 02： 三级批发价 03：四级批发价04：五级批发价05：普通客户价06：六级批发价07：七级批发价08：八级批发价09：九级批发价10：十级批发价
						"SaleSettleStyle": {
							"Code": this.SaleSettleStyle.Code
						}, //默认收款方式编码 00：限期收款01：全额订金02：全额现结03：月结04：分期收款05：其它
						"PartnerAddresDTOs": this.linkman //联系方式
					}
				}
				if(this.clearing != -1){
					resData.dto.DefaultSettleStyleOfReceive = {
						"Code": this.clearingForm[this.clearing].Code
					} //默认结算方式
				}
				if(this.bankAccount != -1){
					resData.dto.DefaultBankAccountOfReceive = {
						"Name":this.BankAccountQuery[this.bankAccount].Name
					} //默认账号
				}
				if(this.bill != -1){
					resData.dto.DefaultInvoiceTypeOfReceive =  {
						"Code": this.billList[this.bill].id ////票据类型编码 00：普通发票 01：专用发票 02：收据
					} //默认票据类型
				}
				this.$http.post('valet_order/partnerCreate',resData).then(res => {
					if(res.code == 1) {
						this.$common.show('保存成功')
						setTimeout(() => {
							uni.navigateBack()
						},1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.biankuang{
		height: 2rpx;
		width: 100%;
		background: #4DAABF;
	}
	.yuanquan{
		width: 38rpx;
		height: 38rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
	}
</style>